html {
  font-size: 14px;
  overflow-y: auto;
}
body {
  background-color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Navigation */
.navbar {
  border-bottom: 1px solid #ccc;
}
.navbar-brand {
  font-size: 1.5rem;
}
.navbar-brand img {
  opacity: 0.6;
  margin-left: 0.5rem;
  padding-top: 3px;
}

/* Map and Editor */

#editor {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  height: auto;
  position: absolute;
  top: 51px;
  bottom: 0;
  left: 0;
  width: 45%;
}
#dataviewer {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  border-left: 1px solid #ccc;
  height: auto;
  position: absolute;
  top: 51px;
  bottom: 0;
  left: 45%;
  right: 0;
}

#editor.portrait {
  height: 25%;
  width: 100%;
  bottom: auto;
}
#dataviewer.portrait {
  width: 100%;
  padding: 0;
  top: calc(51px + 25%);
  left: 0;
  border-left: none;
  border-top: 1px solid #ccc;
}

#map {
  width: 100%;
  height: 100%;
  background-image: url();
}
#data {
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1001;
}
#dataviewer.fullscreen {
  position: absolute;
  /*top: 0 !important;*/
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
}
#editor.hidden {
  display: none;
}

.CodeMirror {
  height: 100%;
  line-height: 1.2em;
}
#editor .CodeMirror-scroll {
  height: 100%;
  overflow-x: auto;
}
#editor textarea {
  padding: 0;
  border: 0;
  height: 100%;
  width: 100%;
  font-family: monospace;
}
.monospace {
  font-family: monospace;
}
#data .CodeMirror-scroll {
  height: 100%;
  overflow-x: auto;
}
.CodeMirror-gutter-text {
  color: #888;
}
.CodeMirror-gutter-text,
.CodeMirror-lines {
  padding: 20px 12px 12px;
}

/* Links */
a {
  font-weight: bold;
}
a.external::after {
  content: "\F35D";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #333;
  margin-left: 0.4em;
  font-size: 0.8em;
  line-height: 1em;
}
a.external {
  white-space: nowrap;
}

/* Modals */
.modal {
  z-index: 1001;
}
.modal-card-foot {
  justify-content: flex-end;
}
@media screen and (min-width: 1023px) {
  .modal-content,
  .modal-card {
    width: 894px;
  }
}
.modal-card-body p {
  margin-bottom: 0.2lh;
}
.modal-card-body p > input[type="checkbox"]:first-child {
  margin-top: 1lh;
}

input[type="checkbox"] {
  margin-right: 0.3em;
}

.leaflet-control-buttons .fas {
  font-size: 14px;
}
.leaflet-control-buttons a:hover {
  background-color: #ffffff;
  color: #777777;
}
.leaflet-control-buttons a {
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
}
.leaflet-control-buttons a span {
  display: inline-block;
  vertical-align: middle;
}
.leaflet-control-buttons a.disabled span {
  opacity: 0.5;
  cursor: default;
}
.leaflet-container .leaflet-control-search {
  opacity: 0.8;
  margin-left: 6px;
  width: 32rem;
}
.leaflet-container .leaflet-control-search .input {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}
.leaflet-container .leaflet-control-zoom a,
.leaflet-container .leaflet-control-buttons a {
  opacity: 0.8;
}
.leaflet-container a:visited {
  color: #4b2f89;
}

.dialog {
  display: none;
}
.ui-autocomplete {
  max-width: 35em;
}
.ui-autocomplete a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ui-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}
.ui-combobox {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ui-combobox input.ui-autocomplete-input {
  background: white;
  width: calc(100% - 30px);
}
.ui-widget {
  font-size: 1em;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background-color: #ddd;
  border-color: #bbb;
  color: #454545;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #454545;
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
  background-image: url();
}
.ui-autocomplete.ui-widget-content {
  max-height: 40%;
  overflow-y: auto;
  overflow-x: hidden;
}

.crosshairs {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -8px;
  opacity: 0.6;
  z-index: 800; /* Order above Leaflet map panes: https://leafletjs.com/reference.html#map-pane */
}

.errorline {
  background: #ffe1e1 !important;
}

.cm-mustache {
  color: #d83;
}

.leaflet-popup-pane {
  opacity: 0.88;
}
.leaflet-popup-content-wrapper {
  border-radius: 3px;
}
.leaflet-popup-content {
  word-wrap: break-word;
}
.leaflet-popup-content p {
  margin: 0;
}
.leaflet-popup-content .title.is-4,
.leaflet-popup-content .subtitle.is-5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.ui-widget textarea {
  font-family: monospace;
}

.ui-front {
  z-index: 1011 !important;
}
.ui-front.ui-widget-overlay {
  z-index: 1001 !important;
}
.ui-autocomplete.ui-front {
  z-index: 1014 !important;
}
.ui-front.huge_data {
  z-index: 1040 !important;
}
body .ui-tooltip {
  opacity: 0.8;
  border: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

/*free form search/query builder*/
#ffs-dialog-typo a {
  font-weight: normal;
}

#data_stats {
  text-align: right;
  margin: 0;
  padding: 0.1em 0.7em;
  font-size: 12px;
  line-height: 1.5;
  background-color: #eee;
  opacity: 0.8;
  border-top: 1px solid #888;
  border-left: 1px solid #888;
}
.stats {
  font-size: 12px;
  border-radius: 0;
  white-space: nowrap;
}
.stats.ui-tooltip {
  max-width: none;
}

.leaflet-dummy-none-marker {
  display: none;
}
.leaflet-popup-tip-container {
  opacity: 0.8;
}

.leaflet-tooltip.text-tooltip {
  padding: 2px 6px;
}

/* osm.org query sync */
#logout {
  display: none;
}
#save-dialog .osm,
#load-dialog .osm {
  display: none;
}

#export-dialog .format {
  margin-right: 0.5rem;
}
#export-dialog .field-body {
  flex-grow: 2;
}

kbd {
  display: inline-block;
  margin: 0 0.1em;
  padding: 0.1em 0.6em;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #fff;
  background-color: #e1e3e5;
  border: 1px solid #adb3b8;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(12, 13, 14, 0.2),
    0 0 0 2px #fff inset;
  white-space: nowrap;
}

.modal-card-title .icon {
  margin-right: 4px;
}

.palette {
  width: 22px;
  display: inline-block;
  height: 12px;
  margin-right: 120px;
}
.palette.sequential {
  background: #ffffb2;
  box-shadow:
    #fed976 22px 0px 0px 0px,
    #feb24c 44px 0px 0px 0px,
    #fd8d3c 66px 0px 0px 0px,
    #f03b20 88px 0px 0px 0px,
    #bd0026 110px 0px 0px 0px;
}
.palette.qualitative {
  background: #e41a1c;
  box-shadow:
    #377eb8 22px 0px 0px 0px,
    #4daf4a 44px 0px 0px 0px,
    #984ea3 66px 0px 0px 0px,
    #ff7f00 88px 0px 0px 0px,
    #ffff33 110px 0px 0px 0px;
}
#styler-button {
  display: none;
}
